<script setup lang="ts">
// 新用户增长趋势
import { storeToRefs } from 'pinia'
import { onMounted, reactive, ref, watch } from 'vue'
import LineChart from '@/components/Echart/line/lineChart.vue'
import { useDealerDataStore } from '@/stores/module/dealerData'
import { headersStore } from '@/stores/apiHeader'
import { forEach } from 'lodash'
const dealerStore = useDealerDataStore()
const headerStore = headersStore()
const { dealerGrowthTrend } = storeToRefs(dealerStore) //接口数据
const { month } = storeToRefs(headerStore) //header数据
const x = dealerGrowthTrend.value?.x
const y = dealerGrowthTrend.value?.y
const dealerGrowthTrendChartData = reactive({
  title: '',
  info: [],
  x:'',
  y:''
})
const chartType_MemberbyMonth = ref('') //折线图是否可滑动类型配置

const resetChartType = () => {
  //month 00 代表全年
  if (month.value !== '00') {
    chartType_MemberbyMonth.value = 'MemberByMonth'
  } else {
    chartType_MemberbyMonth.value = ''
  }
}

const resetTitle = () => {
  //如果接口没有title 默认给一个
  if (
    dealerGrowthTrend.value.title == '' ||
    dealerGrowthTrend.value.title == null
  ) {
    dealerGrowthTrendChartData.title = 'dealerNewMemberLine'
  } else {
    dealerGrowthTrendChartData.title = dealerGrowthTrend.value.title
  }
}

const resetData = () => {
  dealerGrowthTrendChartData.info.length = 0
  if (dealerGrowthTrend.value.info && dealerGrowthTrend.value.info.length > 0) {
    dealerGrowthTrend.value.info.forEach(function (element) {
      var item = { name: '', value: '' }
      item.name = element.interval
      item.value = element.new_distributor_number
      //item.value = element.performance;
      dealerGrowthTrendChartData.info.push(item)
    })
  }
}

onMounted(() => {
  resetTitle()
  resetChartType()
  resetData()
})

watch(
  () => dealerGrowthTrend.value,
  () => {
    resetTitle()
    resetChartType()
    resetData()
  },
  { deep: true }
)
</script>
<template>
  <el-carousel-item>
    <card-box>
      <template v-slot:title>
        <h1>{{ dealerGrowthTrend.title }}</h1>
      </template>
      <LineChart
        v-if="
          dealerGrowthTrendChartData.info &&
          dealerGrowthTrendChartData.info.length > 0
        "
        :chart-data="dealerGrowthTrendChartData"
        :chart-type="chartType_MemberbyMonth"
        :x="x"
        :y="y"
      />
      <div class="NoPlanYet-box" v-else>
        <p>{{ $t('bi_common_nodata') }}</p>
      </div>
    </card-box>
  </el-carousel-item>
</template>
<style lang="scss" scoped>
.NoPlanYet-box {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/NoPlanYet-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 183px 165px;

  font-size: 16px;
  color: #00f6ff;
  p {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
